<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form表单</title>
<!-- 引入jQuery.js文件 -->
<script type="text/javascript" src="static/bootstrap/jquery.js"></script>
<link rel="stylesheet"href="static/jquery-easyui-1.4.1/themes/default/easyui.css">
<!-- 引入easyui小图标文件  -->
<link rel="stylesheet" href="static/jquery-easyui-1.4.1/themes/icon.css">
<script type="text/javascript"src="static/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="static/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function(){
		$.extend($.fn.validatebox.defaults.rules, {    
			midLength: {    //验证方法，json对象
				validator: function(value, param){    //value文本框中的值, param传递参数的数组
					return value.length >= param[0] && value.length <= param[1];
				},
				message: '用户名必须在2到5个字符之间！'   //不符合条件提示
			} 	
			/* inputLeng: {  //约定字符
				validator: function(value, param){
					return value.length == param[0];
				},
				message: '密码必须为4个字符'
			} */
		});
		
		//数值验证组件
	 	 $('#age').numberbox({    
		    min:0, //最小值
		    max:150, //最大值
		    required:true, //必填
		    missingMessage:'年龄必填！' //提示文字
		});
		
		//日期组件
		$('#birthdate').datebox({
			required:true,
			missingMessage:'生日必填',
			editable:false
		});
		
		//日期时间组件
		$('#time').datetimebox({
			required:true,
			missingMessage:'时间必填',
			editable:false
		});
		
		//Ajax提交数据	
		/* $('#btn').click(function(){
			$.ajax({
				type:'post', //请求方式
				url:'save', //请求地址
				cache:false, //清除缓存
				data:$('#myform').serialize(), //序列化表单
				dataType:'text', //服务器返回时接收的数据类型
				success:function(result){ //操作成功消息提示框
					var result = $.parseJSON(result);
					$.messager.show({
						title:result.status, //标题
						msg:result.message, //内容
						height:180,
						width:220
					});
				},
			});
		}); */ 
		
		//做一个提交操作
		$('#btn').click(function(){
			$('#myform').form('submit',{
				url:"save", //请求地址
				onSubmit:function(){ //提交之前触发，返回false停止
					if(! $('#myform').form('validate')){   //validate做表单字段验证，当所有字段都有效的时候返回true
						$.messager.show({
							title: '提示信息',
							msg: '验证没用通过，不能提交',
							height:180,
							width:220
						});
						return false;   //返回false，表单不提交
					}
				},
				success:function(result){ //提交之后触发
					$.messager.show({ 
						title:'提示信息', 
						msg:'操作成功！', 
						height:180,
						width:220
					});	
				}
			});
		});
		
		//定义form表单
		/* $('#myform').form({
			url:"save", //请求地址
			onSubmit:function(){ //提交之前触发，返回false停止
				if(! $('#myform').form('validate')){   //validate做表单字段验证，当所有字段都有效的时候返回true
					$.messager.show({
						title: '提示信息',
						msg: '验证没用通过，不能提交',
						height:180,
						width:220
					});
					return false;   //返回false，表单不提交
				}
			},
			success:function(result){ //提交之后触发
				$.messager.show({ 
					title:'提示信息', 
					msg:'操作成功！', 
					height:180,
					width:220
				});	
			}
		}); */ 
		//点击按钮提交
		/* $('#btn').click(function(){
			$('#myform').submit();
		}); */
		
		//回车键提交
		/* $('#myform').find('input').on('keyup',function(event){
			if(event.keyCode == 13){
				$('#myform').submit();
			}
		}); */
	});
</script>
</head>
<body>
	<div id="mydiv" class="easyui-panel" style="width: 400px;height: 400px;"title="我的窗口">
		<form id ="myform" action="" method="post">
			<table>
				<tr>
					<td>
						<label for="stuNum">学号</label>
					</td>
					<td>
						<input type="text" class="easyui-validatebox" name="stuNum" id="stuNum" required=true validType="midLength[2,5]" missingMessage="学号必填！">
					</td>
				</tr>
				<tr>
					<td>
						<label for="name">姓名</label>
					</td>
					<td>
						<input type="text"name="name" id="name" class="easyui-validatebox" required=true missingMessage="姓名必填！">
					</td>
				</tr>
				<tr>						
					<td>
						<label for="sex">性别</label>
					</td>
					<td>
						<input type="radio"name="sex" checked="checked" id="sex1" value="男">男
						<input type="radio" name="sex" id="sex2" value="女">女
					</td>
				</tr>
				<tr>
					<td>
						<label for="age">年龄</label>
					</td>
					<td>
						<input type="text" name="age" id="age">
					</td>					
				</tr>
				<tr>
					<td>
						<label for="birthdate">出生日期</label>
					</td>
					<td>
						<input type="text" name="birthdate" id="birthdate">
					</td>
				</tr>
				<tr>
					<td>
						<label for="time">开始时间</label>
					</td>
					<td>
						<input type="text" name="time" id="time">
					</td>
				</tr>
				
				<tr style="text-align: center;">
					<td colspan="2">
						<a class="easyui-linkbutton" id="btn">保存</a>
					</td>
				</tr>
			</table>			
		</form>
	</div>
</body>
</html>